<template>
  <!-- 内容网格容器 -->
  <div class="content-grid">
    <!-- 循环渲染每个内容卡片 -->
    <!-- v-for指令：循环渲染contentData数组中的每个元素 -->
    <div 
      v-for="item in contentData" 
      :key="item.id"
      class="content-card"
    >
      <!-- 图片类型内容 -->
      <!-- v-if指令：条件渲染，只有当item.type为'image'时才显示 -->
      <div v-if="item.type === 'image'" class="card-image">
        <!-- 内容图片 - 使用动态绑定显示图片 -->
        <img :src="item.image" :alt="item.title" />
      </div>
      
      <!-- 文本类型内容 -->
      <!-- v-else-if指令：条件渲染，当item.type为'text'时显示 -->
      <div v-else-if="item.type === 'text'" class="card-text">
        <!-- 文本内容容器 -->
        <div class="text-content">
          <!-- 标题 - 使用插值语法显示数据 -->
          <h3>{{ item.title }}</h3>
          <!-- 内容描述 -->
          <p>{{ item.content }}</p>
        </div>
      </div>
      
      <!-- 卡片底部信息 -->
      <div class="card-footer">
        <!-- 作者信息 -->
        <div class="author-info">
          <!-- 作者头像 -->
          <img :src="item.avatar" :alt="item.author" class="author-avatar" />
          <!-- 作者名称 -->
          <span class="author-name">{{ item.author }}</span>
        </div>
        
        <!-- 卡片操作按钮 -->
        <div class="card-actions">
          <!-- 点赞按钮 -->
          <!-- @click指令：监听点击事件，调用toggleLike函数 -->
          <button class="action-btn like-btn" @click="toggleLike(item)">
            <!-- 点赞图标 -->
            <img src="/src/assets/icons/like.png" alt="点赞" class="action-icon" />
            <!-- 点赞数 - 使用formatLikes函数格式化显示 -->
            <span>{{ formatLikes(item.likes) }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义组件的props（属性）
const props = defineProps({
  // 内容数据数组 - 包含所有要显示的内容
  contentData: {
    type: Array,           // 类型为数组
    required: true        // 必传属性，父组件必须传递
  }
})

// 格式化点赞数显示 - 将数字转换为更易读的格式
const formatLikes = (likes) => {
  // 如果点赞数大于等于10000，显示为万单位
  if (likes >= 10000) {
    return (likes / 10000).toFixed(1) + 'w'
  }
  // 否则直接显示数字
  return likes.toString()
}

// 处理点赞功能 - 用户点击点赞按钮时调用
const toggleLike = (item) => {
  // 这里可以添加点赞逻辑
  // 例如：发送API请求、更新数据库等
  console.log('点赞:', item.title)
}
</script>

<style scoped>
.content-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 24px 32px 24px 24px; width: 100%; box-sizing: border-box; max-width: 1536px; margin: 0 auto; }
.content-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; display: flex; flex-direction: column; width: 100%; aspect-ratio: 0.75; }
.content-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.card-image { position: relative; width: 100%; height: 0; padding-bottom: 100%; border-radius: 16px 16px 0 0; overflow: hidden; margin-bottom: 8px; }
.card-image img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
.card-text { padding: 12px; background: #f8f9fa; margin-bottom: 8px; height: 100%; display: flex; flex-direction: column; }
.text-content h3 { font-size: 15px; font-weight: 500; color: #333; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-content p { font-size: 13px; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.card-footer { padding: 8px 12px 12px; display: flex; justify-content: space-between; align-items: center; background: white; flex-shrink: 0; }
.author-info { display: flex; align-items: center; gap: 6px; flex: 1; }
.author-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid #f0f0f0; }
.author-name { font-size: 12px; color: #666; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-actions { display: flex; gap: 8px; }
.action-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: #8a8a8a; font-size: 11px; transition: color 0.2s; }
.action-btn:hover { color: #ff2442; }
.action-icon { width: 13px; height: 13px; object-fit: contain; }
@media (max-width: 1536px) { .content-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; } }
@media (max-width: 1200px) { .content-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 24px; } .content-card { aspect-ratio: 0.72; } }
@media (max-width: 768px) { .content-grid { grid-template-columns: repeat(2, 1fr); padding: 16px; gap: 16px; } .content-card { border-radius: 12px; aspect-ratio: 0.7; } .card-image { border-radius: 12px 12px 0 0; } }
@media (max-width: 480px) { .content-grid { grid-template-columns: repeat(1, 1fr); padding: 12px; gap: 12px; } .content-card { aspect-ratio: 0.68; } .text-content h3 { font-size: 14px; } }
</style>